import { View, Text } from '@tarojs/components'
import './index.scss'


function StepProgress({ currentStep, totalSteps, percentage }) {
  // 计算百分比，如果未提供则根据步骤计算
  const calculatedPercentage = percentage !== undefined 
    ? percentage 
    : Math.round((currentStep / totalSteps) * 100);

  return (
    <View className='step-progress-container'>
      <View className='step-info'>
        <Text className='step-text'>步骤 {currentStep}/{totalSteps}</Text>
        <Text className='percentage'>{calculatedPercentage}%</Text>
      </View>
      <View className='progress-bar'>
        <View 
          className='progress-fill' 
          style={{ width: `${calculatedPercentage}%` }}
        />
      </View>
    </View>
  )
}

export default StepProgress